<div class="row text-left">
  <div class="pull-right pl-20 pt-0 mr-10">
    <div class="text-left inline-block">
      {{new-select
          classNames="period"
          content=periods
          value=selected
          localizedLabel=true
          disabled=state.loading
      }}
    </div>
    {{#if (eq selected 'custom')}}
      <div class="text-left inline-block" style="width: 120px;">
        {{ember-flatpickr
            disabled=state.loading
            enableSeconds=false
            enableTime=true
            dateFormat="m/d h:i"
            minuteIncrement=1
            date=from
            maxDate=to
            onChange=(action "fromDidChange")
            onClose=(action "onTimePickerClose")
            placeholder=(t 'metricsAction.from.label')
        }}
      </div>
      <div class="text-left inline-block" style="width: 120px;">
        {{ember-flatpickr
            disabled=state.loading
            enableSeconds=false
            dateFormat="m/d h:i"
            minuteIncrement=1
            enableTime=true
            minDate=from
            maxDate=now
            date=to
            onOpen=(action "onOpen")
            onChange=(action "toDidChange")
            onClose=(action "onTimePickerClose")
            placeholder=(t 'metricsAction.to.label')
        }}
      </div>
    {{/if}}
    <button type="button" style="height: 37px;margin-top: -4px;" class="btn bg-primary" disabled={{state.loading}} {{action "refresh"}}>
      <span><i class="icon icon-refresh"></i></span>
    </button>
  </div>
  {{#if allowDetail}}
    <div class="pull-left pl-20 pt-0 mr-10">
      {{#if state.detail}}
        <div>
          <div class="btn-group no-inline-space">
            <button class="btn btn-link btn-sm bg-primary" disabled={{state.loading}} type="button" {{action "toggle" true}}>{{t 'metricsAction.detail.label'}}</button>
            <button class="btn btn-link btn-sm bg-default" disabled={{state.loading}} type="button" {{action "toggle" false}}>{{t 'metricsAction.summary.label'}}</button>
          </div>
        </div>
      {{else}}
        <div>
          <div class="btn-group no-inline-space">
            <button class="btn btn-link btn-sm bg-default" disabled={{state.loading}} type="button" {{action "toggle" true}}>{{t 'metricsAction.detail.label'}}</button>
            <button class="btn btn-link btn-sm bg-primary" disabled={{state.loading}} type="button" {{action "toggle" false}}>{{t 'metricsAction.summary.label'}}</button>
          </div>
        </div>
      {{/if}}
    </div>
  {{/if}}
</div>

